<!DOCTYPE html>
<html lang="zh">

<head th:replace="/fragment/head::user-head(~{::title},~{})">
    <title>博客信息</title>
</head>

<body>
    <div id="app">
        <nav th:replace="/fragment/nav::nav1"></nav>

        <div class="ui container">
            <div class="ui attached segment">
                <div class="ui horizontal link list">
                    <div class="item">
                        <img :src="`/res/image/${blog.author.avatar}`" alt="" class="ui avatar image">
                        <div class="content"><a href="#" class="header">{{blog.author.username}}</a></div>
                    </div>
                    <div class="item">
                        <i class="calendar icon"></i>{{blog.date}}
                    </div>
                    <div class="item">
                        <i class="eye icon"></i> {{blog.views}}
                    </div>
                    <div class="item">
                        <i class="heart icon"></i> {{blog.likes}}
                    </div>
                    <div class="item">
                        <i class="star icon"></i> {{blog.favorites}}
                    </div>
                </div>
            </div>
            <div class="ui attached segment">
                <img :src="`/res/image/${blog.img}`" alt="封面" class="ui rounded image" style="margin: auto;">
            </div>
            <div class="ui attached segment">
                <div class="ui label orange">原创</div>
            </div>
            <div class="ui attached segment" v-html="blog.content">
            </div>
            <div class="ui attached segment positive message">
                {{blog.summary}}
            </div>
            <div class="ui segment">
                <form action="" method="post">
                    <div class="ui form">
                        <textarea name="" id=""></textarea>
                        <div class="ui button "><i class="edit icon"></i>发布</div>
                    </div>
                </form>
                <!-- 评论区 -->
                <div class="ui threaded comments">
                    <h3 class="ui dividing header">评论</h3>
                    <comment-info v-for="comment in comments" :c="comment" :anchor="true"></comment-info>
                </div>
            </div>
        </div>

        <footer th:replace="/fragment/footer::f1"></footer>
    </div>

    <script th:replace="/fragment/script::jquery"></script>
    <script th:replace="/fragment/script::semantic"></script>
    <script th:replace="/fragment/script::mobile-hide"></script>
    <script th:replace="/fragment/script::vue"></script>
    <template id="r">
        <div class="comment">
            <a v-if="anchor" class="avatar" :id="c.cid">
                <img :src="`/res/image/${c.user.avatar}`">
            </a>
            <a v-else class="avatar" :href="`#${c.cid}`">
                <img :src="`/res/image/${c.user.avatar}`">
            </a>
            <div class="content">
                <a class="author">
                    {{c.user.username}}
                </a>
                <a class="author" v-if="c.reply !== undefined">
                    对 {{c.reply.user.username}} 说
                </a>
                <div class="metadata">
                    <span class="date">
                        {{c.date}}
                    </span>
                </div>
                <div class="text">{{c.content}}</div>
                <div class="actions"><a class="reply">回复</a></div>
            </div>
            <div class="comments" v-if="c.reply !== undefined">
                <comment-info :c="c.reply" :anchor="false"></comment-info>
            </div>
        </div>
    </template>
    <script>
        var ajax = {
            data() {
                return {
                    comments: [],
                    blog: {}
                }
            },
            mounted() {
                getJson("/blog/[[${bid}]]", (a) => { this.blog = a }).then(() => {
                    var url = `/toHtml/${this.blog.url}`;
                    axios.get(url).then(response => {
                        this.blog.content = response.data;
                    })
                });
                postJson("/comments/blog", {
                    "blogId": "[[${bid}]]",
                    "pageNo": 0,
                    "pageSize": 20
                }, (a) => { this.comments = a.data });
            }
        }
        var app = Vue.createApp(ajax)
        app.component('comment-info', {
            props: ['c', 'anchor'],
            template: '#r'
        })
        app.mount('#app')
    </script>
</body>

</html>